<template>
	<view>
		
		<!-- 头部导航栏 -->
		<view style="margin-top: 20upx; height: 100upx;" class="flex align-center">
			<view style="width: 50upx;margin-left: 20upx;" @click="goBack" >
				<image src="../../static/icon/left.png" style="width: 35upx; height: 50upx; margin:auto;  filter: grayscale(100);"></image>
			</view>
			<view style="font-size: 150%; margin-left: 210upx;">水果收银台</view>
			<view  @click="goOrderList" style="font-size: 110%; margin-left: 120upx;">订单中心</view>
		</view>
		<!-- 头部导航栏结束 -->
		
		<!-- 支付价钱 -->
		<view class="bg-white" style="height: 200upx;align-items:center ;justify-content: center;">
		<view style="font-size: 250%;color: red;padding: 50upx;" class="text-bold text-center">
			<text style="font-size: 130%;">￥{{totalPrice}}</text>
		</view>
		</view>
		<!-- 支付价钱结束 -->
		
		<!-- 上部分支付方式 -->
		<view class="bg-white">
			<view v-for="(item,index) in payMethodList" :key="index" @click="clickradio(item.title,index)"  style="border-top: #D8D8D8 solid 1upx;margin-top: 25upx;" class="flex justify-between align-center">
				<view class="flex align-center" style="margin-top: 20upx;">
					<image mode="heightFix" style="height:50upx;margin-left: 50upx;" :src="item.imgURL"></image>
					<view style="margin-left: 20upx;">{{item.title}}</view>
				</view>
				<view class="flex align-center" style="padding: 10upx;margin-top: 20upx;">
					<radio style="margin-left: 10upx;" class="radio"  :checked="clickIndex==index?true:false" color="#ff0000"></radio>
				</view>
			</view>

		</view>
		
		<!-- 支付 -->
		<view  @tap="goPay" class="cu-tag bg-gradual-orange round flex align-center bg-white barfixed" style="padding: 20upx;margin-top: 20upx;height: 100upx;">
			<view style="font-size: 120%;">{{payMethod}}</view>
			<view style="font-size: 120%;" class=" text-xl">￥{{totalPrice}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clickIndex:0,
				totalPrice:0,
				orderId:0,
				payMethod:'京东支付',
				payMethodList:[
					{
						title:'京东支付',
						imgURL: '../../static/icon/jingdong.png'
					},
					{
						title:'银联支付',
						imgURL: '../../static/icon/yinlian.png'
					},
					{
						title:'微信支付',
						imgURL: '../../static/icon/weixinpay.png'
					},
					{
						title:'支付宝支付',
						imgURL: '../../static/icon/paypal.png'
					}
				]
				
			}
		},
		onLoad(options) {
			console.log('orderId',options.orderId)
			this.orderId = options.orderId
			this.getTotalPrice()
		},
		methods: {
			async getTotalPrice() {
				var res = await this.$request({
					url:`cartorder/order/orderItemList/${this.orderId}`,
					params:{},
					type:"GET"
				})
				if(res.code == 0){
					this.totalPrice = res.order.payAmount
				}
			},
			clickradio(title,index) {
				this.clickIndex = index
				this.payMethod = title
			},
			goOrderList() {
				uni.navigateTo({
					url:'./orderCRM'
				})
			},
			goBack(){
				uni.showModal({
					title: '确认要离开收银台？',
					content:'请尽快完成支付。',
					confirmText:'继续支付',
					confirmColor:'#F43F3B',
					cancelText:'确认离开',
					cancelColor:'#A4A4A4',
					success: (res) => {
						if(res.confirm){
							return
						} else if(res.cancel){
							uni.switchTab({
								url:'../goods/goods'
							})
						}
					}
				})
			},
			async goPay() {
				var res = await this.$request({
					baseURL:'http://192.168.42.101:88/',
					url:`cartorder/order/orderStatus/${this.orderId}/${1}`,
					params:{},
					type:'GET'
				})
				console.log('res.msg',res.msg)
				if(res.code == 0){
					uni.showModal({
						title:'支付成功!',
						content:'进入我的页面即可查看订单',
						cancelText:'我的订单',
						cancelColor:'#0081FF',
						confirmText:'继续逛逛',
						confirmColor:'#FF0000',
						success: function (res) {
						  if (res.confirm) {
						    uni.switchTab({
						    	url:'../goods/goods'
						    })
						  } else if (res.cancel) {
								uni.navigateTo({
									url:'../order/orderCRM?type=2'
								})
						  }
						}
					})
				}
			}
		}
	}
</script>

<style>
.barfixed {
		position: fixed;
		bottom: 0upx;
		width: 750upx;
	}
</style>
